var warp = document.getElementsByClassName('warp')[0];
var go = document.getElementsByClassName('go')[0];
var main = document.getElementsByClassName('main')[0];
var speed = 5;//移动的速度
var num,  //得分数
    setTime1,//移动定时器
    key;//点击开关

//点击开始初始化
function initialize(e) {
    key = 'true';
    num = 0;
    e.stopPropagation();
    go.style.display = 'none';
    move();
    for (var i = 0; i < 5; i++) {
        createBox()
    };
    main.addEventListener('click', end, true);

}
go.addEventListener('click', initialize, true)

//mani开始运动
function move() {
    clearInterval(setTime1);
    main.style.top = '-500px';
    var mainTop = parseInt(main.style.top);
    setTime1 = setInterval(function () {
        mainTop += speed
        main.style.top = mainTop + 'px';
        if (mainTop >= 0) {
            createBox();
            mainTop = -100;
            main.style.top = mainTop + 'px';       
        }
        if (main.children[6]) {
            finish();
            main.removeChild(main.children[6]);
        }


        //没点击判断游戏是否结束
        function finish() {
            for(var i=0;i<4;i++){
                if(main.children[6].children[i].classList.contains('black')){
                    clearInterval(setTime1);
                    alert(num);
                    key='false'
                }
            }
        }
    }, 100)
}

//动态的创建盒子
function createBox() {
    var divUl = document.createElement('ul');
    for (var j = 0; j < 4; j++) {
        var divLi = document.createElement('li');
        divUl.appendChild(divLi);
    }
    divUl.appendChild(divLi);
    divUl.className = 'icsh';
    var index = Math.floor(Math.random() * 4);
    main.insertBefore(divUl, main.children[0]);
    divUl.children[index].className = 'black';

    /*var divUl=document.createElement('ul');
    for(var i=0;i<4;i++){
        var divLi=document.createElement('li');
        divUl.appendChild(divLi);
    }
    divUl.className='icsh';
    main.insertBefore(divUl,main.children[0])*/
}


//点击判断游戏是否结束
function end(e) {
    if (key) {
        if(num%10==0){
            speed+=6;
        };
        var event = e || window.event;
        var target = event.target || event.srcElement;
        //target.classList.contains('black');
        target.style.backgroundColor = 'rgb(128,128,128)';
        if (!target.classList.contains('black')) {
            clearInterval(setTime1);
            target.style.backgroundColor = 'red';
            alert(num);
            key='false';
            console.log(key)
        }
        target.className='';
        num++;
    }
}

